import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import '@/App.css'
import {Button} from "antd"
import "./index.scss"
import Form from 'antd'



interface data1{
  id:number,
  name:string
}

const data:Array<data1>=[
  {id:15,name:"阿U哦过二哥"},
  {id:21,name:"阿U哦过二哥"},
  {id:23,name:"阿U哦过二哥"},
  {id:14,name:"阿U哦过二哥"},
  {id:11,name:"阿U哦过二哥"}
]


// 函数式组件  无状态
function home() {
  // const [count, setCount] = useState(0)
  const [count, setCount]=useState(0)
  const getBtn=(data:string,e:any)=>{
  console.log("哈哈哈---",data,e)
  setCount(156)
  console.log( obj1)
  setObj1({
    ...obj1,name:"哈哈",age:11
  })
  }

  const [obj1,setObj1]=useState({
    name:"我爱你",
    age:18
  })


  return (
    <>
      <ul>
        {
         data.map((item:data1)=>{
          return <li key={item.id}>{item.name}</li>
         }) 
        }
        
      </ul>
      <Button type="primary" onClick={
        (e:any)=>{
          getBtn("我爱你",e)
        }
      }>home</Button>
      <span>{count}</span>
      <div className='main'>
        <p>对象改变：{obj1.name}今年{obj1.age}岁</p>
      </div>
    </>
  )
}

export default home
